<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>斑马线</title>
</head>
<body>
	
	<ul id="news">
		<li>item1</li>
		<li>item2</li>
		<li>item3</li>
		<li>item4</li>
		<li>item5</li>
	</ul>
	<script type="text/javascript">
		var lis = document.querySelectorAll('li')
		console.log(lis)
		for(var i = 0; i < lis.length; i++) {
			// 设置动态斑马线
			lis[i].onmouseover = function() {
				this.style.backgroundColor = 'red'
			}
			lis[i].index = i // 设置当前li的属性index = i
			lis[i].onmouseout = function() {
				// 这里this.index 获取到上面赋值的 index = i 
				if(this.index % 2 == 0) {
					this.style.backgroundColor = 'pink'
				}else {
					this.style.backgroundColor = ''
				}
			}
			// 设置静态斑马线
			if(i % 2 == 0) {
				lis[i].style.backgroundColor = 'pink'
			}
		}
		// 扩展：设置class设置的属性值和获取class设置的属性值
		
	</script>
</body>
</html>